.load2 {
    .loader,
    .loader:before,
    .loader:after {
        border-radius: 50%;
    }

    .loader {
        color: $foreground;
        font-size: $size - ($size/2.5);
        text-indent: -99999em;
        margin: 40px auto;
        position: relative;
        width: 10em;
        height: 10em;
        box-shadow: inset 0 0 0 1.5em;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);

        &:before,
        &:after {
            position: absolute;
            content: '';
        }

        &:before {
            width: 5.2em;
            height: 10.2em;
            background: $background;
            border-radius: 0;
            top: -0.1em;
            left: -0.1em;
            -webkit-transform-origin: 5.1em 5.1em;
            transform-origin: 5.1em 5.1em;
            -webkit-animation: load2 2s infinite ease 1.5s;
            animation: load2 2s infinite ease 1.5s;
        }

        &:after {
            width: 5.2em;
            height: 10.2em;
            background: $background;
            border-radius: 0;
            top: -0.1em;
            left: 4.9em;
            -webkit-transform-origin: 0.1em 5.1em;
            transform-origin: 0.1em 5.1em;
            -webkit-animation: load2 2s infinite ease;
            animation: load2 2s infinite ease;
        }

    }

}

@mixin load2-frames() {

    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

}

@-webkit-keyframes load2 {
    @include load2-frames;
}

@keyframes load2 {
    @include load2-frames;
}
